<template>
  <div class="list-table">
    <div class=" area-header">
      <span class="area-header-title">{{ $t('资金计划') }}</span>
      <div class="chartBtn" style="margin-top: -5px;">
        <deal-select v-model="queryParams.id" size="small" scope="true" :placeholder="$t('请选择项目')" @change="getDealData" />
      </div>
    </div>
    <div class="capitalPlan">
      <div class="item">
        {{ $t('未来6个月预计流入') }}{{ $t('金额单位') }}
        <span>{{ moneyFormat(afterSixLR, 'w') }}</span>
      </div>
      <div class="item">
        {{ $t('未来6个月预计流出') }}{{ $t('金额单位') }}
        <span>{{ moneyFormat(afterSixLC, 'w') }}</span>
      </div>
    </div>
    <div v-loading="loadChart" class="mb15" style="height:300px;">
      <barLineChart v-if="chartData.datas.length > 0" ref="barChart" :chart-data="chartData" height="100%" @clickHandel="clickHandel" />
    </div>
    <el-row>
      <el-col :span="24">
        <div class="area-header">
          <span class="area-header-title">{{ $t('现金流') }}</span>
        </div>
        <el-form ref="cashflowQueryForm" :model="queryParams" :inline="true">
          <el-form-item :label="$t('现金流类型')" prop="type" label-width="120">
            <el-select v-model="queryParams.type" :placeholder="$t('现金流类型')" clearable>
              <el-option
                v-for="dict in typeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('方向')" prop="direction">
            <el-select v-model="queryParams.direction" :placeholder="$t('方向')" clearable>
              <el-option
                v-for="dict in directionOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('业务类型')" prop="operateType">
            <el-select v-model="queryParams.operateType" :placeholder="$t('业务类型')" clearable>
              <el-option
                v-for="dict in operateTypeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="queryCashflow">{{ $t("搜索") }}</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetCashflow">{{ $t("重置") }}</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['deal:cashflow:export']"
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="exportHandle"
            >{{ $t("导出") }}</el-button>
          </el-col>
        </el-row>
        <el-table v-loading="listLoad" :data="tableList" border>
          <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
            <template slot-scope="scope">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('项目名称')" show-overflow-tooltip align="center" prop="dealBase.dealName">
            <template slot-scope="scope">
              <router-link
                target="_blank"
                :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.dealBase.companyId}}"
                class="link_a"
              >{{ scope.row.dealBase.dealName }}</router-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('现金流类型')" align="center" prop="type" :formatter="typeFormat" show-overflow-tooltip />
          <el-table-column :label="$t('业务类型')" align="center" prop="operateType" :formatter="operateTypeFormat" show-overflow-tooltip />
          <el-table-column :label="$t('发生时间')" align="center" prop="operateDate" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.operateDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('发生金额') + $t('金额单位')" align="center" prop="operateAmount" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="money-text">{{ moneyFormat(scope.row.operateAmount, 'w') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('方向')" align="center" prop="direction" :formatter="directionFormat" show-overflow-tooltip />
          <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="200">
            <template slot="header">
              <span>{{ $t('操作') }}</span>
              <!--                          <el-tooltip placement="top">-->
              <!--                            <div slot="content">-->
              <!--                              {{ $t('不是从现金流功能添加的数据，不能修改与删除，如需修改请修改来源数据') }}-->
              <!--                            </div>-->
              <!--                            <i class="el-icon-question" />-->
              <!--                          </el-tooltip>-->
            </template>
            <template slot-scope="scope">
              <el-button
                v-hasPermi="['deal:cashflow:edit']"
                size="small"
                type="text"
                :icon="scope.row.dataId ? 'el-icon-view' : 'el-icon-edit'"
                @click="checkCashflow(scope.row)"
              >{{ scope.row.dataId ? $t('查看') : $t('修改') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getListData"
        />
      </el-col>
    </el-row>
    <!-- 添加或修改项目现金流对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <dealCashflowForm ref="dealCashflowForm" />
    </el-dialog>
  </div>
</template>

<script>
  import DealSelect from '@/components/Select/dealSelect'
  import { listDealCapitalPlan, getAfterSixMoney, dealCapitalPlan } from '@/api/deal/cashflow/dealCapitalPlan'
  import dealCashflowForm from '@/views/deal/cashflow/dealCashflowForm.vue'
  import barLineChart from '@/views/chart/barLineChart.vue'
    export default {
    components: {
      DealSelect,
      dealCashflowForm,
      barLineChart
    },
      data() {
          return {
            chartData: {
              datas: []
            },
            // charts加载
            loadChart: false,
            // 现金流总条数
            total: 0,
            // 弹出层标题
            title: '现金流',
            // 是否显示弹出层
            formOpen: false,
            // 现金流加载
            listLoad: false,
            // 现金流table数据
            tableList: [],
            // 记录上一次点击事件传的参数值
            previousVal: undefined,
            // 查询参数
            queryParams: {
              id: '',
              dealId: '',
              type: 'SJ',
              pageNum: 1,
              pageSize: 10,
              yearMonth: ''
            },
            // chart容器对象
            chart: {},
            // 现金流类型  预计 实际字典
            typeOptions: [],
            // 方向：流入、流出字典
            directionOptions: [],
            // 类型：投资、回款、费用字典
            operateTypeOptions: [],
            // 预计后六个月流出
            afterSixLC: 0,
            // 预计后六个月流入
            afterSixLR: 0
          }
      },
      created() {
        this.getChartData()
        this.getListData()
        this.getAfterAmount()
        this.getDicts('cash_flow_type').then(response => {
          this.typeOptions = response.data
        })
        this.getDicts('cash_flow_direction').then(response => {
          this.directionOptions = response.data
        })
        this.getDicts('deal_cash_flow_type').then(response => {
          this.operateTypeOptions = response.data
        })
      },
      methods: {
        // 现金流类型  预计 实际字典翻译
        typeFormat(row) {
          return this.selectDictLabel(this.typeOptions, row.type)
        },
        // 方向：流入、流出字典翻译
        directionFormat(row) {
          return this.selectDictLabel(this.directionOptions, row.direction)
        },
        // 类型：投资、回款、费用字典翻译
        operateTypeFormat(row) {
          return this.selectDictLabel(this.operateTypeOptions, row.operateType)
        },
        // 获取charts数据
        getChartData() {
          this.loadChart = true
          dealCapitalPlan(this.queryParams).then(response => {
            this.loadChart = false
            var rows = response.data || []
            this.chartDataFormatter(rows)
          })
        },
        // 获取未来6个月预计流入/流出
        getAfterAmount() {
          this.queryParams.dealId = this.queryParams.id
          getAfterSixMoney(this.queryParams).then(res => {
            this.afterSixLC = res.data.sixLC
            this.afterSixLR = res.data.sixLR
          })
        },
        // 获取现金流表格数据
        getListData() {
          this.listLoad = true
          listDealCapitalPlan(this.queryParams).then(response => {
            this.tableList = response.rows
            this.total = response.total
            this.listLoad = false
          })
        },
        // 选择项目，获取项目的charts数据
        getDealData() {
          this.loadChart = true
          this.queryParams.dealId = this.queryParams.id
          this.getListData()
          this.getAfterAmount()
          dealCapitalPlan(this.queryParams).then(response => {
            this.loadChart = false
            var rows = response.data || []
            this.chartDataFormatter(rows)
          })
        },
        chartDataFormatter(rows) {
          if (rows.length > 0) {
            this.chartData.xLabel = [...new Set(rows.map(el => el.time))]
            this.chartData.legend = true
            this.chartData.legendLeft = 'center'
            this.chartData.valueFormatter = true
            var _type = [...new Set(rows.map(el => el.type))]
            var datas = []
            _type.forEach(v => {
              var _types = rows.filter(el => el.type === v)
              var row = {
                type: 'bar',
                name: v,
                data: _types.map(ele => { return { value: ele.value, time: ele.time } })
              }
              datas.push(row)
            })
            this.chartData.datas = datas
          } else {
            this.chartData = {
              datas: []
            }
          }
        },
        // 重置操作
        resetQuery() {
          this.resetForm('queryForm')
          this.queryParams.id = ''
          this.queryParams.dealId = ''
          this.queryParams.yearMonth = ''
          this.getDealData()
        },
        // 点击柱状图
        clickHandel(val) {
          this.queryParams.yearMonth = val.time
          this.getListData()
        },
        // 查看现金流数据
        checkCashflow(row) {
          this.formOpen = true
          this.$nextTick(() => {
            // 调用form页面的 init 方法初始化数据
            this.$refs.dealCashflowForm.init(row)
            this.$refs.dealCashflowForm.form.dataId = undefined
          })
        },
        // 搜索按钮操作
        queryCashflow() {
          this.queryParams.pageNum = 1
          this.getListData()
        },
        // 重置按钮操作
        resetCashflow() {
          this.resetForm('cashflowQueryForm')
          this.queryParams.id = ''
          this.queryParams.dealId = ''
          this.queryParams.yearMonth = ''
          this.queryCashflow()
        },
        /** 导出按钮操作 */
        exportHandle() {
          this.downLoadExcelPost('/cashflow/dealCashflow/export', this.queryParams)
        }
      }
    }
</script>

<style scoped>

</style>
